@use '../css/variables' as *;

.heroBanner {
  background-color: var(--ifm-background-color);
  color: var(--ifm-color-content-secondary);
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
  text-align: left;
}

.heroBannerContainer {
  display: flex;
  flex-direction: row;
}

.heroBannerContainer > img {
  height: 300px;
}

.heroSubtitle {
  font-size: fluid(800px, $container-max-width, 16px, 24px);

  //  24
}

.textContainer {
  margin-left: 3em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.buttons,
.buttonGroup {
  display: flex;
  gap: 16px;
}

.buttons {
  flex-wrap: wrap;
}

.buttonGroup {
  flex: 1;

  & > * {
    flex: 1;
    /* box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.25); */
    border: 1px solid rgba(0, 0, 0, 0.05);
  }
}

.supportButton {
  background-color: #1dbf73;
}

.supportButton:hover {
  filter: brightness(0.9);
}

@media (max-width: 800px) {
  .heroBanner {
    padding: 2rem 0;
  }

  .heroBannerContainer {
    flex-direction: column;
  }

  .heroBannerContainer > img {
    display: none;
  }

  .buttons {
    flex-direction: column;
  }

  .buttonGroup {
    flex-wrap: wrap;
  }

  .textContainer {
    margin-left: 0;
  }
}
